<template>
  <nut-input v-model="model" readonly @click="showPop" clearable placeholder="点击选择"></nut-input>
  <nut-popup
      v-model:visible="show" :style="{ padding: '30px 10px' }"
      position="bottom"
  >
    <div style="text-align: right;margin-right: 30px;" v-if="catList.length > 0" >
      <nut-button size="small" type="danger" @click="clear">清除</nut-button>
    </div>
  <div class="wrap">
    <template v-if="catList.length > 0">
      <div class="item" v-for="(item, index) in catList" :key="index" @click="chose(item)" :class="[item.id===catId?'active':'']">
        {{item.name}}
      </div>
    </template>
    <div v-else>
      无数据~~
    </div>
  </div>
  </nut-popup>
</template>
<script setup>
import {ref} from "vue";
import tool from "@/utils/tool.js";
import {useGlobal} from "@/stores/useGlobal.js";
const props = defineProps({
  modelValue: {type: String, default: ''},
  cat: {type: String, default: ''},
  list: {type: Array, default: () => [] },
})
const model = defineModel()
const catId = defineModel('id')
const show = ref(false)
const catList = ref([])
const global = useGlobal()
const showPop = () => {
  if(props.cat) {
    getList()
  }
  else if(props.list.length > 0) {
    catList.value = props.list
    show.value = true
  }
}
const chose = (item) => {
  model.value = item.name
  catId.value = item.id
  show.value = false
}
const getList = () => {
  tool.post('common/dropdown',{cat: props.cat}).then(ret => {
    if(ret.stat) {
      catList.value = ret.data
      show.value = true
    }
  })
}
const clear = () => {
  model.value = ''
  catId.value = ''
}
</script>

<style scoped lang="scss">
.wrap {
  display: flex;
  flex-wrap: wrap;
  background: white;
  .item {
    width: 100px;
    border: 1px solid #0dc3c3;
    margin:5px;
    text-align: center;
    border-radius: 4px;
    height: 30px;
    line-height: 30px;
    &:active {
      background: #0dc3c3;
      color: white;
    }
    &.active {
      background: #0dc3c3;
      color: white;
    }
  }
}
</style>